html {
    font-size: 50px;
    background-color: #f7f7f7;
}

@num: 15;

@media screen and(min-width:320px) {
    html {
        font-size: (320px / @num);
    }
}

@media screen and(min-width:360px) {
    html {
        font-size: (360px / @num);
    }
}

@media screen and(min-width:375px) {
    html {
        font-size: (375px / @num);
    }
}
@media screen and(min-width:384px) {
    html {
        font-size: (384px / @num);
    }
}

@media screen and(min-width:400px) {
    html {
        font-size: (400px / @num);
    }
}

@media screen and(min-width:411px) {
    html {
        font-size: (411px / @num);
    }
}

@media screen and(min-width:414px) {
    html {
        font-size: (414px / @num);
    }
}

@media screen and(min-width:424px) {
    html {
        font-size: (424px / @num);
    }
}

@media screen and(min-width:480px) {
    html {
        font-size: (480px / @num);
    }
}

@media screen and(min-width:540px) {
    html {
        font-size: (540px / @num);

    }
}

@media screen and(min-width:720px) {
    html {
        font-size: (720px / @num);

    }
}

@media screen and(min-width:750px) {
    html {
        font-size: (750px / @num);
    }
}

@f: 50;

.body {
    min-width: 320px;
    background-color: #f7f7f7;
}

.box {
    margin: auto;
    width: (750rem/@f);
    height: (90rem/@f);

    .header {
        width: (750rem/@f);
        height: (90rem/@f);

        img {
            width: 100%;
            height: 100%;
        }
    }

    .nav {
        width: (750rem/@f);
        height: (90rem/@f);
        background: url(../img/banner.png);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: rgb(209, 34, 63);

        a {
            display: block;
            width: (35.88rem/@f);
            height: (60rem/@f);

            img {
                width: (35.88rem/@f);
                height: (60rem/@f);
            }
        }

        div {
            display: flex;
            justify-content: center;
            width: (570rem/@f);
            height: (87.99rem/@f);

            img {
                width: (390rem/@f);
                height: (75.99rem/@f);
            }
        }
    }

    // 滚动显示隐藏
    .nav2 {
        width: (750rem/@f);
        height: (88rem/@f);
        display: flex;
        position: fixed;
        top: 0px;
        z-index: 20;
        display: none;

        .nav2-div {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: (782rem/@f);
            height: (88rem/@f);
            background-color: #ffdb47;

            a {
                display: block;
                width: (35.88rem/@f);
                height: (60rem/@f);

                img {
                    width: (35.88rem/@f);
                    height: (60rem/@f);
                }
            }

            .nav-ipt {
                width: (570rem/@f);
                height: (88rem/@f);

                .inp-k {
                    overflow: hidden;
                    position: relative;
                    width: (522rem/@f);
                    height: (64rem/@f);
                    margin: (15rem/@f) auto;
                    border-radius: (32rem/@f);
                    background-color: #fff;

                    i {
                        display: block;
                        width: (36rem/@f);
                        height: (36rem/@f);
                        margin: (15rem/@f) (0rem/@f) (0rem/@f) (15rem/@f);
                        background: url(../img/d2.png)center no-repeat;
                        background-size: 100%;
                        background-color: #fff;
                    }

                    .inp-div {
                        opacity: 0.4;
                        position: absolute;
                        top: 0;
                        width: (702rem/@f);
                        height: (88rem/@f);
                        margin: -4.5px 0 0 0;

                        input {
                            border: none;
                            outline: none;
                            width: 100%;
                            height: (64rem/@f);
                            line-height: (32rem/@f);
                            font-size: (.56rem);
                            color: #999999;
                            margin: (7rem/@f) 0 0 (60rem/@f);
                        }
                    }
                }
            }
        }
    }

    // 输入框
    .inp {
        width: (750rem/@f);
        height: (92rem/@f);
        position: sticky;
        top: (0rem/@f);
        z-index: 9;
        overflow: hidden;
        background-color: #ffdb47;
        z-index: 10;

        .inp-k {
            overflow: hidden;
            position: relative;
            width: (702rem/@f);
            height: (64rem/@f);
            margin: (15rem/@f) auto;
            border-radius: (32rem/@f);
            background-color: #fff;

            i {
                display: block;
                width: (36rem/@f);
                height: (36rem/@f);
                margin: (15rem/@f) (0rem/@f) (0rem/@f) (15rem/@f);
                background: url(../img/d2.png)center no-repeat;
                background-size: 100%;
                background-color: #fff;
            }

            .inp-div {
                opacity: 0.4;
                position: absolute;
                top: 0;
                width: (702rem/@f);
                height: (88rem/@f);
                margin: -4.5px 0 0 0;

                input {
                    border: none;
                    outline: none;
                    width: 100%;
                    height: (64rem/@f);
                    line-height: (32rem/@f);
                    font-size: (.56rem);
                    color: #999999;
                    margin: (7rem/@f) 0 0 (60rem/@f);
                }
            }
        }

    }

    // 轮播图
    .lunbo {
        width: (750rem/@f);
        height: (229rem/@f);
        background: url(/img/banner.png) no-repeat;
        background-size: 100%;
        margin: 0 0 (10rem/@f) 0;
        background-color: #ffdb47;
        border-radius: 0 0 150px 150px;

        .lun-ul {
            width: (702rem/@f);
            height: (229rem/@f);
            margin: auto;
            border-radius: 15px;

            .swiper {
                width: 100%;
                height: 100%;
                border-radius: 25px;

                .swiper-slide {
                    width: 100%;
                    height: 100%;

                    img {
                        width: (750rem/@f);
                        height: (368rem/@f);
                        position: absolute;
                        bottom: 0;
                    }

                    .img-logo {
                        width: (180rem/@f);
                        height: (50rem/@f);
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: (15rem/@f);

                    }
                }
            }

        }
    }

    // gif-1  图片
    .gif-1 {
        width: (750rem/@f);
        height: (230rem/@f);
        position: relative;

        .gif-img1 {
            margin: auto;
            width: (750rem/@f);
            height: (230rem/@f);
        }

        .gif-img2 {
            width: (123rem/@f);
            height: (123rem/@f);
            position: absolute;
            top: 1.14rem;
            left: 1.28rem;
        }
    }

    //  nav 导航
    .banner {
        width: (750rem/@f);
        height: (290rem/@f);
        margin: 0 auto (30rem/@f);
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        background-color: #f4f4f4;

        a {
            width: (150rem/@f);
            height: (142rem/@f);
            line-height: (142rem/@f);
            text-align: center;

            .banner-li {
                width: (150rem/@f);
                height: (84rem/@f);

                img {
                    display: block;
                    width: (84rem/@f);
                    height: (84rem/@f);
                    margin: (10rem/@f) auto 0;
                }
            }

            span {
                display: block;
                width: (150rem/@f);
                height: (28rem/@f);
                line-height: (28rem/@f);
                font-size: (22rem/@f);
                color: rgb(156, 156, 156);
            }
        }
    }
    //  限时秒杀 

    .miao {
        width: (702rem/@f);
        height: (258rem/@f);
        margin: auto;
        border-radius: (25rem/@f) (25rem/@f) 0 0;
        background-color: #fff;
        display: flex;
        justify-content: space-between;

        .miao-border {
            border-right: 1px solid rgb(212, 212, 212);
        }

        .miao-a1 {
            width: (350rem/@f);
            height: (258rem/@f);

            .daojishi {
                width: (350rem/@f);
                height: (58rem/@f);
                display: flex;

                .txt-1 {
                    width: (112rem/@f);
                    height: (40rem/@f);
                    font-size: (28rem/@f);
                    margin: (18rem/@f) (8rem/@f) 0 (24rem/@f);
                }

                .time-a1 {
                    text-align: center;
                    width: (130.38rem/@f);
                    height: (40rem/@f);
                    line-height: (40rem/@f);
                    font-size: (24rem/@f);
                    color: #333;
                    margin: (18rem/@f) (8rem/@f) 0 (24rem/@f);

                    span {
                        width: (34rem/@f);
                        height: (28rem/@f);
                        font-weight: 900;
                        border-radius: (9rem/@f);
                        background-color: #ffcc00;
                    }
                }

            }

            .txt-2 {
                width: (300rem/@f);
                height: (30rem/@f);
                color: #999;
                font-size: (24rem/@f);
                margin: (4rem/@f) 0 (10rem/@f) (24rem/@f);
            }

            .haowu {
                width: (350rem/@f);
                height: (149rem/@f);
                display: flex;
                justify-content: space-around;

                .hao-a1 {
                    position: relative;
                    width: (120rem/@f);
                    height: (149rem/@f);

                    img {
                        display: block;
                        width: (120rem/@f);
                        height: (120rem/@f);
                    }

                    .qian {
                        position: absolute;
                        width: (120rem/@f);
                        height: (28rem/@f);
                        line-height: (19rem/@f);
                        background-color: #ecc;

                        .span {
                            display: block;
                            height: (29rem/@f);
                            line-height: (30rem/@f);
                            font-size: (14.4rem/@f);
                            text-align: center;
                            border: 1px solid #f2f2f2;
                            background-color: #fff;
                            box-shadow: -1px -2px 9px rgb(156, 156, 156);
                            border-radius: (15rem/@f) (15rem/@f) 0 0;
                            margin: 0 0 0 (-2rem/@f);
                        }

                        .span1 {
                            display: block;
                            height: (29rem/@f);
                            line-height: (30rem/@f);
                            background-color: #fff;
                            color: #ff5500;
                            font-size: (26rem/@f);

                            i {
                                font-size: (26rem/@f);
                                margin: 0 (-5rem/@f) 0 (5rem/@f);
                            }

                            em {
                                font-size: (20rem/@f);
                                font-style: inherit;
                                margin: 0 0 0 (-5rem/@f);
                            }
                        }
                    }

                    .span-d {
                        box-shadow: -1px -2px 9px rgb(156, 156, 156);
                        border: 1px solid #b9b9b9;
                        display: block;
                        content: '';
                        position: absolute;
                        top: (102rem/@f);
                        left: 35%;
                        width: (40rem/@f);
                        height: (40rem/@f);
                        background-color: rgb(255, 255, 255);
                        opacity: .9;
                        border-radius: (10rem/@f) 0 0 0;
                        transform: rotate(45deg);
                    }

                }
            }
        }
    }

    .miao-yuan {
        border-radius: 0;
    }

    // 为你推荐
    .tuijian {
        width: (702rem/@f);
        height: (172rem/@f);
        margin: auto;
        display: flex;
        justify-content: space-between;
        border: none;
        border-top: 1px solid #d8d8d8;
        background-color: #fff;

        .tui-left {
            width: (173rem/@f);
            height: (172rem/@f);
            .tui-left-p1 {
                width: (173rem/@f);
                height: (45rem/@f);
                padding: (47rem/@f) (18rem/@f) 0 (18rem/@f);
                font-size: (32rem/@f);
                font-weight: 700;
                text-align: center;
                box-sizing: border-box;
            }

            .tui-left-p2 {
                width: (173rem/@f);
                height: (45rem/@f);
                padding: (47rem/@f) (18rem/@f) 0 (18rem/@f);
                color: #555;
                font-size: (24rem/@f);
                box-sizing: border-box;
            }
        }

        .tui-right {
            display: flex;
            justify-content: flex-start;
            width: (508rem/@f);
            height: (172rem/@f);

            .tui-a1 {
                width: (120rem/@f);
                height: (172rem/@f);
                img {
                    width: (100rem/@f);
                    height: (100rem/@f);
                    margin: (20rem/@f) (10rem/@f) 0;
                }

                span {
                    width: (120rem/@f);
                    height: (30rem/@f);
                    line-height: (30rem/@f);
                    display: block;
                    text-align: center;
                    background-color: #fff;
                    font-size: (20rem/@f);
                }
            }
        }
    }

    // .五一推荐好物
    .haowu1 {
        width: (750rem/@f);
        height: (120rem/@f);

        img {
            width: 100%;
            height: 100%;
        }
    }

    //   推荐好物  商品
    .shangpin {
        width: (750rem/@f);
        height: (281rem/@f);

        .shangpin-div1 {
            width: (702rem/@f);
            height: (256rem/@f);
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: auto;

            .div1-a {
                position: relative;
                width: (167rem/@f);
                height: (243rem/@f);

                a {
                    width: (167rem/@f);
                    height: (243rem/@f);
                    display: block;

                    .img-a1 {
                        width: (167rem/@f);
                        height: (243rem/@f);
                    }

                    .a-p1 {
                        position: absolute;
                        top: (160rem/@f);
                        width: (130rem/@f);
                        height: (32rem/@f);
                        line-height: (30rem/@f);
                        font-size: (26rem/@f);
                        text-align: center;
                        margin: 0 (20rem/@f);
                        color: #fff;
                    }

                    .a-p2 {
                        position: absolute;
                        top: (201rem/@f);
                        width: (140rem/@f);
                        height: (32rem/@f);
                        line-height: (30rem/@f);
                        font-size: (20rem/@f);
                        text-align: center;
                        margin: 0 (10rem/@f);
                        background-color: rgb(255, 255, 255);
                        border-radius: (20rem/@f);
                    }
                }

                .img0 {
                    width: (140rem/@f);
                    height: (140rem/@f);
                    position: absolute;
                    top: 0;
                    left: (17rem/@f);
                }
            }
        }
    }

    // 推荐榜单
    .bdan {
        width: (750rem/@f);
        height: (60rem/@f);

        img {
            display: block;
            width: (750rem/@f);
            height: (60rem/@f);
            margin: 0 0 0 (15rem/@f);
        }
    }

    // 榜单商品
    .newbd-list {
        width: (750rem/@f);
        height: (760rem/@f);

        .toplun {
            width: (702rem/@f);
            height: (266rem/@f);
            margin: 0 auto (13rem/@f);
            display: flex;
            justify-content: space-between;

            .top-a {
                position: relative;
                display: block;
                width: (226rem/@f);
                height: (266rem/@f);
                border-radius: 0 0 25px 25px;
                overflow: hidden;
                background-color: rgb(255, 255, 255);

                .top-lun {
                    width: (226rem/@f);
                    height: (266rem/@f);

                    .top-a-img2 {
                        width: (226rem/@f);
                        height: (100rem/@f);
                        margin: (1rem/@f) 0 0 0;
                    }
                }

                .top-a-img1 {
                    width: (150rem/@f);
                    height: (150rem/@f);
                    margin: (15rem/@f) (38rem/@f) 0;
                }

                .top-a-img2 {
                    width: (226rem/@f);
                    height: (100rem/@f);
                    margin: 0px 0 0 0;

                }

                .top-a-p1 {
                    position: absolute;
                    bottom: (75rem/@f);
                    width: (226rem/@f);
                    height: (34rem/@f);
                    font-size: (22rem/@f);

                    span {
                        width: (100rem/@f);
                        height: (34rem/@f);
                        line-height: (34rem/@f);
                        margin: (-8rem/@f) auto;
                        text-align: center;
                        display: block;
                        border-radius: 25px;
                        color: #D9A87A;
                        background-color: #fff;
                        border: 1px solid #D9A87A;
                    }
                }

                .top-a-p2 {
                    position: absolute;
                    bottom: (35rem/@f);
                    width: (226rem/@f);
                    height: (34rem/@f);
                    text-align: center;
                    color: #fff;
                    font-size: (26rem/@f);
                }

                .top-a-p3 {
                    position: absolute;
                    bottom: (0rem/@f);
                    width: (226rem/@f);
                    height: (34rem/@f);
                    margin: auto;
                    text-align: center;
                    color: #fff;
                    opacity: .8;
                    font-size: (22rem/@f);
                }
            }
        }

        .fenlan {
            width: (702rem/@f);
            height: (240rem/@f);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            background-color: skyblue;

            .fen-a1 {
                width: (350rem/@f);
                height: (240rem/@f);
                display: flex;
                flex-direction: column;
                padding: (21rem/@f) 0 (16rem/@f) (18rem/@f);
                background-color: #fff;
                box-sizing: border-box;

                .fen-p1 {
                    display: flex;
                    width: (332rem/@f);
                    height: 32px;
                    background-color: #fff;

                    .fen-span-1 {
                        display: block;
                        width: (182rem/@f);
                        height: 32px;
                        font-size: (26rem/@f);
                        font-weight: 900;
                    }

                    .fen-span-2 {
                        display: block;
                        height: (28rem/@f);
                        width: (90rem/@f);
                        line-height: (28rem/@f);
                        text-align: center;
                        font-size: (22rem/@f);
                        border-radius: 25px;
                        color: #dcb373;
                        margin: 0 0 0 (25rem/@f);
                        background-color: #f9f5ee;
                    }
                }

                .fen-span-t0 {
                    width: (320rem/@f);
                    height: (30rem/@f);
                    display: block;
                    font-size: (24rem/@f);
                    margin: (6rem/@f) 0 0;
                    color: #666;
                    opacity: 0.8;
                    background-color: #fff;
                }

                img {
                    width: (140rem/@f);
                    height: (140rem/@f);
                    margin: (2rem/@f) (10rem/@f) 0 (6rem/@f);
                }
            }

            .fen-span1 {
                display: block;
                width: (2rem/@f);
                height: (240rem/@f);
                background-color: #f2f2f2;
            }

            .fen-span3 {
                display: block;
                width: (2rem/@f);
                height: (240rem/@f);
                background-color: #f2f2f2;
            }

        }

        .fen-span2 {
            display: block;
            width: (702rem/@f);
            height: (2rem/@f);
            margin: auto;
            background-color: #f2f2f2;
        }
    }

    // 猜你喜欢
    .cainixihuan {
        width: (750rem/@f);
        height: (97rem/@f);
        margin-top: (7rem/@f);
        img {
            margin: (37rem/@f) (20rem/@f) (0) (25rem/@f);
            width: (702rem/@f);
            height: (60rem/@f);
            background-color: #fff;
        }

    }
    // 猜你喜欢  商品

    .likeshang {
        width: (750rem/@f);
        height: (2000rem/@f);
        display: flex;
        justify-content: space-evenly;
        background-color: #f7f7f7;

        .like-left {
            width: (342rem/@f);
            height: (3430rem/@f);

            .like-left-a1 {
                width: (342rem/@f);
                height: (542rem/@f);
                background-color: #fff;
                margin: 0 0 (18rem/@f);
                padding: 0 0 (14rem/@f);
                box-sizing: border-box;
                border-radius: (15rem/@f);

                .left-a1-img {
                    width: (342rem/@f);
                    height: (342rem/@f);
                    background-color: #fff;

                    img {
                        width: (342rem/@f);
                        border-radius: (15rem/@f);
                        height: (342rem/@f);
                    }
                }

                .left-a1-p1 {
                    width: (318rem/@f);
                    height: (67rem/@f);
                    color: #333;
                    font-size: (26rem/@f);
                    font-weight: 900;
                    margin: (18rem/@f) (12rem/@f) 0;
                }

                .cuxiao-tag {
                    width: (269rem/@f);
                    height: (24rem/@f);
                    display: flex;
                    margin: 0.22rem 0.24rem 0.48rem;

                    img {
                        width: (48rem/@f);
                        height: (24rem/@f);
                        margin-right: (10rem/@f);
                    }

                    .cx-text {
                        width: (100rem/@f);
                        height: (24rem/@f);
                        margin: 0 (3rem/@f) (2rem/@f) (2rem/@f);
                        padding: (2rem/@f) (12rem/@f);
                        font-size: (17rem/@f);
                        box-sizing: border-box;
                        border-radius: (5rem/@f);
                        color: #333;
                        text-align: center;
                        border: 1px solid #FFBB00;
                        background-color: #FEFBEE;
                    }
                }

                .left-a1-qian {
                    width: (330rem/@f);
                    height: (38rem/@f);
                    margin: 0 0 0 (13rem/@f);
                    box-sizing: border-box;

                    .left-a1-qian-txt {
                        width: (330rem/@f);
                        height: (38rem/@f);
                        color: #FF4422;
                        font-weight: bold;
                        display: flex;
                        align-items: flex-end;

                        .txt-span1 {
                            width: (24rem/@f);
                            height: (28rem/@f);
                            font-weight: normal;
                            font-size: (24rem/@f);
                        }

                        .txt-span2 {
                            width: (99rem/@f);
                            height: (36rem/@f);
                            font-size: (36rem/@f);

                        }

                        .txt-span3 {
                            width: (105.48rem/@f);
                            height: (38rem/@f);
                            line-height: (45rem/@f);
                            font-size: (20rem/@f);
                            color: #999;
                            font-weight: normal;
                            margin: 0 0 0 (13rem/@f);
                        }
                    }
                }
            }
        }

        .like-right {
            width: (342rem/@f);
            height: (2000rem/@f);
            background-color: rgb(48, 160, 204);

            .like-right-a1 {
                width: (342rem/@f);
                height: (542rem/@f);
                background-color: pink;
                margin: 0 0 (18rem/@f);
                padding: 0 0 (14rem/@f);
                box-sizing: border-box;
                border-radius: (15rem/@f);

            }
        }
    }

    // 登录显示
    .denglu {
        position: fixed;
        bottom: (90rem/@f);
        z-index: 9;
        display: block;
        width: (750rem/@f);
        height: (90rem/@f);
        z-index: 10;

        img {
            width: 100%;
            height: 100%;
        }
    }

    //   底部
    .di {
        width: (750rem/@f);
        height: (90rem/@f);
        position: fixed;
        bottom: 0;
        z-index: 9;
        display: flex;
        flex-wrap: nowrap;

        a {
            width: (150rem/@f);
            height: (100rem/@f);
            display: block;
            background-color: rgb(255, 255, 255);

            img {
                width: (48rem/@f);
                height: (48rem/@f);
                margin: (12rem/@f) (51rem/@f) 0;
            }

            span {
                width: (150rem/@f);
                height: (32rem/@f);
                display: block;
                font-size: (20rem/@f);
                text-align: center;
                line-height: (10rem/@f);

            }

        }
    }

    //  侧边红包
    .ce {
        width: (100rem/@f);
        height: (100rem/@f);
        position: fixed;
        top: 40%;
        right: (10rem/@f);
        z-index: 9;

        img {
            width: (100rem/@f);
            height: (100rem/@f);
        }
    }

    // 返回顶部
    .dingbu {
        position: fixed;
        top: 70%;
        right: (10rem/@f);
        width: (80rem/@f);
        height: (80rem/@f);
        line-height: (80rem/@f);
        text-align: center;
        border-radius: (100rem/@f);
        z-index: 9;

        img {
            width: (60rem/@f);
            height: (60rem/@f);
            background-color: #fff;
            text-align: center;
            border-radius: (100rem/@f);
            box-shadow: 5px 5px 5px rgba(116, 116, 116, 0.541);

        }

    }


}

#district_menu {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;

    .district_select {
        background: image-url('arrow-up.png') no-repeat center right;
        background-size: 7px;
        background-position: 55px 17px;
        width: 70px;
        position: absolute;
        left: 0;
        font-size: 15px;
    }

    label {
        display: block;
    }
}